<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
	<title>Dynatree - Example</title>

	<script src="../jquery/jquery.js" type="text/javascript"></script>
	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>

	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
	var gv_newRosterOptionID = -1;
	$(function () {
		$("#tree").dynatree({
			debugLevel:2,
			onActivate: function (node) {
				$("#active").text(node.data.title);
			},
			onFocus: function (node) {
				$("#focus").text(node.data.title);
			}
		});
	});

	function copyfail_onclick() {
		var dtActive = $("#tree").dynatree("getActiveNode");
		var newTopNodeKey = gv_newRosterOptionID;
		var clipboard = dtActive.toDict(true, function (dict) {
			dict.title = "Copy of " + dict.title + " - " + gv_newRosterOptionID;
			dict.key = gv_newRosterOptionID; // prevent duplicate keys
			gv_newRosterOptionID--;
		});

		var dtNewNode = dtActive.addChild(clipboard);
		dtNewNode.move(dtActive,'after');
	}

	function copywork_onclick() {
		var dtActive = $("#tree").dynatree("getActiveNode");
		var newTopNodeKey = gv_newRosterOptionID;
		var clipboard = dtActive.toDict(true, function (dict) {
			dict.title = "Copy of " + dict.title + " - " + gv_newRosterOptionID;
			dict.key = gv_newRosterOptionID; // prevent duplicate keys
			gv_newRosterOptionID--;
		});

		var dtNewNode = dtActive.addChild(clipboard);
		dtActive.expand(true);
		dtNewNode.move(dtActive,'after');
	}

</script>
<body>
  <!-- Add a <div> element where the tree should appear: -->
	<div id="tree">
		<ul>
			<li id="key1" title="Look, a tool tip!">item1 with key and tooltip
			<li id="key2" class="selected">item2: selected on init
			<li id="key3" class="folder">Folder with some children
				<ul>
					<li id="key3.1">Sub-item 3.1
					<li id="key3.2">Sub-item 3.2
				</ul>

			<li id="key4" class="expanded">Document with some children (expanded on init)
				<ul>
					<li id="key4.1">Sub-item 4.1
					<li id="key4.2">Sub-item 4.2
				</ul>

			<li id="key5" class="lazy folder">Lazy folder
		</ul>
	</div>

	<input id="copyFail" type="button" value="copy current node after (Fails)" onclick="return copyfail_onclick()" />
	<input id="copyWork" type="button" value="copy current node after (Works)" onclick="return copywork_onclick()" />
	<div>Active: <span id="active"></span></div>
	<div>Focused: <span id="focus"></span></div>

</body>
</html>
